/* ============================================================
   Infinigate Cloud — Master Stylesheet
   All component styles in one place
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');


/* ── 1. Design tokens ────────────────────────────────────────── */
:root {
  --ig-white:   #FCFCFC;
  --ig-black:   #050C0F;
  --ig-navy:    #153447;
  --ig-coral:   #ED5740;
  --ig-yellow:  #EBA800;
  --ig-teal:    #26BDBD;
  --ig-green:   #09AD6C;
  --ig-red:     #C92A18;

  --ig-navy-05:   rgba(21,52,71,0.05);
  --ig-navy-08:   rgba(21,52,71,0.08);
  --ig-navy-12:   rgba(21,52,71,0.12);
  --ig-navy-20:   rgba(21,52,71,0.20);
  --ig-coral-10:  rgba(237,87,64,0.10);
  --ig-teal-10:   rgba(38,189,189,0.10);
  --ig-green-10:  rgba(9,173,108,0.10);
  --ig-yellow-10: rgba(235,168,0,0.10);
  --ig-red-10:    rgba(201,42,24,0.10);

  --ig-border:       rgba(21,52,71,0.12);
  --ig-border-hover: rgba(237,87,64,0.35);
  --ig-shadow:       0 4px 18px rgba(237,87,64,0.08);
  --ig-shadow-sm:    0 1px 6px rgba(21,52,71,0.07);

  --ig-radius-sm:   6px;
  --ig-radius:      10px;
  --ig-radius-lg:   14px;
  --ig-radius-pill: 40px;

  --ig-font:  'Outfit', system-ui, -apple-system, sans-serif;
  --ig-trans: 0.15s ease;
}


/* ── 2. Sticky footer ────────────────────────────────────────── */
html { height: 100%; }

body {
  min-height:     100%;
  display:        flex;
  flex-direction: column;
  background:     var(--ig-white);
  color:          var(--ig-black);
  font-size:      15px;
  font-weight:    300;
  line-height:    1.65;
  -webkit-font-smoothing: antialiased;
}

body * { font-family: var(--ig-font) !important; }

/* Restore icon font families overridden by the above rule */
.fa, [class^="fa-"], [class*=" fa-"] { font-family: FontAwesome !important; }
.glyphicon, [class^="glyphicon-"], [class*=" glyphicon-"] { font-family: "Glyphicons Halflings" !important; }
.fa, .glyphicon { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.pageHeight { flex: 1 0 auto; }
.wrapper-body { flex: 1 0 auto; }
footer      { flex-shrink: 0; }


/* ── 3. Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--ig-font) !important;
  font-weight:    500 !important;
  line-height:    1.25 !important;
  letter-spacing: -0.015em !important;
  color:          var(--ig-navy) !important;
}

h1 { font-size: 30px !important; }
h2 { font-size: 22px !important; }
h3 { font-size: 18px !important; }
h4 { font-size: 15px !important; }

/* Hero heading overrides — must come after global h rules */
.ig-hero h1, .ig-hero h1 span,
.ig-hero h2, .ig-hero h2 span,
.ig-hero h3, .ig-hero h3 span,
.ig-hero-inner h1, .ig-hero-inner h1 span,
.ig-hero-inner h2, .ig-hero-inner h2 span,
.ig-hero-inner h3, .ig-hero-inner h3 span,
.ig-kb-hero h1, .ig-kb-hero h1 span {
  font-size:      44px !important;
  font-weight:    500 !important;
  line-height:    1.12 !important;
  letter-spacing: -0.025em !important;
  color:          var(--ig-navy) !important;
  text-align:     center !important;
  margin:         0 !important;
  padding:        0 !important;
}

p { font-weight: 300; margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--ig-coral); text-decoration: none; font-weight: 400; transition: color var(--ig-trans); }
a:hover { color: #c44130; text-decoration: underline; }
strong, b { font-weight: 500; }


/* ── 4. Global fixes ─────────────────────────────────────────── */
.skip-to-content           { display: none !important; }
.navbar                    { margin-bottom: 0 !important; }
.pageHeight                { margin-top: 0 !important; padding-top: 0 !important; }
.populararticle            { position: static !important; top: auto !important; }
.section-landing-mostpopular { position: static !important; top: auto !important; }
img[src="/Shape.png"],
img[name="Shape.png"]      { display: none !important; }
[style*="padding-left: 55px"] { padding-left: 0 !important; }
hr { border: none !important; border-top: 1px solid var(--ig-border) !important; margin: 10px 0 !important; }


/* ── 5. Navigation ───────────────────────────────────────────── */
.navbar, .navbar-inverse {
  background: var(--ig-navy) !important;
  border:     none !important;
  box-shadow: none !important;
  min-height: 58px;
}

.navbar .navbar-brand,
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus { padding: 10px 0; color: var(--ig-white) !important; font-weight: 500 !important; }
.navbar .siteTitle          { font-weight: 500 !important; color: var(--ig-white) !important; }

.navbar-inverse .navbar-nav > li > a {
  color: rgba(252,252,252,0.6) !important; font-size: 13px; font-weight: 400 !important;
  height: 58px; line-height: 58px; padding: 0 16px;
  border-bottom: 2.5px solid transparent;
  transition: color var(--ig-trans), background var(--ig-trans), border-color var(--ig-trans);
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus { color: var(--ig-white) !important; background: rgba(252,252,252,0.06) !important; }
.navbar-inverse .navbar-nav > li.active > a,
.navbar-inverse .navbar-nav > li.active > a:hover { color: var(--ig-white) !important; background: transparent !important; border-bottom: 2.5px solid var(--ig-coral); }

.navbar .divider-vertical { border-left: 1px solid rgba(252,252,252,0.10) !important; margin: 12px 0; height: 34px; }

.navbar-inverse .navbar-nav > li > a[href*="SignIn"] {
  color: var(--ig-white) !important; background: var(--ig-coral) !important;
  border-radius: var(--ig-radius-sm); height: auto; line-height: 1.4;
  padding: 8px 18px; margin: 12px 0; font-weight: 500 !important; border-bottom: none !important;
}
.navbar-inverse .navbar-nav > li > a[href*="SignIn"]:hover { background: #c44130 !important; }

.navbar .glyphicon         { font-family: 'Glyphicons Halflings' !important; color: rgba(252,252,252,0.6) !important; font-size: 14px !important; }
.navbar .fa,
.navbar [class*="fa-"]     { font-family: 'FontAwesome' !important; color: rgba(252,252,252,0.6) !important; font-size: 14px !important; }
.navbar-inverse .navbar-toggle { border-color: rgba(252,252,252,0.2) !important; }
.navbar-inverse .navbar-toggle .icon-bar { background: var(--ig-white) !important; }
.navbar .dropdown-search { background: var(--ig-white); border: 1px solid var(--ig-border); border-radius: var(--ig-radius); box-shadow: var(--ig-shadow-sm); padding: 12px; min-width: 320px; }

@media (max-width: 767px) {
  .navbar-collapse { background: var(--ig-navy); border-top: 1px solid rgba(252,252,252,0.08); }
  .navbar-inverse .navbar-nav > li > a { height: auto; line-height: 1.5; padding: 13px 20px; border-bottom: none; border-left: 3px solid transparent; }
  .navbar-inverse .navbar-nav > li.active > a { border-bottom: none; border-left: 3px solid var(--ig-coral); }
}


/* ── 6. Hero (homepage) ──────────────────────────────────────── */
.ig-hero {
  background-color: #f5f6f8;
  background-image: radial-gradient(ellipse at 100% 0%, rgba(237,87,64,0.06) 0%, transparent 60%);
  border-bottom:    1px solid rgba(21,52,71,0.08);
  padding:          72px 0 56px;
}

.ig-hero-inner {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding-left: 20px !important; padding-right: 20px !important;
}

.ig-home-body { background: #f5f6f8; }


/* ── 7. Search bar ───────────────────────────────────────────── */
/* Scoped to .ig-search-wrap — added by the Search web template */
.ig-search-wrap { width: 100%; max-width: 600px; margin: 0 auto; }

.ig-search-wrap .input-group {
  display: flex !important; align-items: center !important; width: 100% !important;
  margin-left: 0 !important; height: 54px !important; background: #ffffff !important;
  border-radius: 40px !important; overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(5,12,15,0.13) !important; border: none !important;
}

.ig-search-wrap .input-group-btn,
.ig-search-wrap .input-group .form-control { display: block !important; float: none !important; position: static !important; }

.ig-search-wrap .input-group-btn { flex: 0 0 auto !important; width: auto !important; }

.ig-search-wrap .input-group .form-control {
  flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
  height: 54px !important; padding: 0 24px !important; border: none !important;
  box-shadow: none !important; background: transparent !important;
  font-size: 15px !important; font-weight: 300 !important; color: var(--ig-black) !important;
  border-radius: 0 !important; outline: none !important;
}

.ig-search-wrap .input-group .form-control::placeholder { color: rgba(5,12,15,0.38) !important; }

.ig-search-wrap .input-group-btn:last-child > .btn {
  height: 54px !important; width: 54px !important; padding: 0 !important;
  background: var(--ig-coral) !important; color: #ffffff !important;
  border: none !important; border-radius: 0 40px 40px 0 !important;
  box-shadow: none !important; outline: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; font-size: 0 !important; transition: background var(--ig-trans) !important;
}

.ig-search-wrap .input-group-btn:last-child > .btn:hover { background: #c44130 !important; }

.ig-search-wrap .input-group-btn:last-child > .btn i {
  font-family: FontAwesome !important; font-size: 16px !important;
  color: #ffffff !important; display: block !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}


/* ── 8. Popular articles strip ───────────────────────────────── */
.ig-popular-section { padding: 40px 15px 24px; }

.ig-section-label {
  font-size: 11px !important; font-weight: 600 !important;
  color: rgba(21,52,71,0.38) !important; letter-spacing: 0.12em !important;
  text-transform: uppercase !important; margin: 0 0 12px !important;
}

.quickAction, .quickAction[style] {
  border-radius: var(--ig-radius) !important; border: 1px solid var(--ig-border) !important;
  overflow: hidden !important; box-shadow: var(--ig-shadow-sm) !important; background: var(--ig-white) !important;
}

.quickAction .list-group { background: var(--ig-white) !important; border: none !important; border-right: 1px solid var(--ig-border) !important; }
.quickAction .list-group:last-child { border-right: none !important; }
.quickAction .list-group:nth-child(even) { background: rgba(21,52,71,0.02) !important; }

.webtitle {
  font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important;
  color: var(--ig-navy) !important; padding: 16px 20px !important; margin: 0 !important;
  background: transparent !important; display: block !important; text-align: left !important;
  transition: background var(--ig-trans), color var(--ig-trans);
}
.webtitle:hover { background: var(--ig-coral-10) !important; color: var(--ig-coral) !important; text-decoration: none !important; }


/* ── 9. Most Recent / Top Rated panels ───────────────────────── */
.ig-articles-section { padding: 0 15px 32px; }

.ig-articles-grid {
  display: flex; flex-wrap: wrap; border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius); overflow: hidden; box-shadow: var(--ig-shadow-sm); background: #ffffff;
}

.ig-articles-col { flex: 1 1 340px; padding: 32px; background: #ffffff; }
.ig-articles-col--right { border-left: 1px solid rgba(21,52,71,0.10); }

.columnBlockLayout[style*="background-image"],
.columnBlockLayout[style*="background-color: rgb(244, 248, 255)"] {
  background-color: var(--ig-white) !important; background-image: none !important;
}

[style*="color:#234B94"], [style*="color: #234B94"] {
  color: var(--ig-navy) !important; font-weight: 500 !important; font-size: 18px !important; line-height: 1.3 !important;
}

.columnBlockLayout a[style*="Segoe UI"] {
  font-size: 14px !important; font-weight: 500 !important; color: var(--ig-navy) !important; line-height: 1.5 !important;
  transition: color var(--ig-trans);
}
.columnBlockLayout a[style*="Segoe UI"]:hover { color: var(--ig-coral) !important; text-decoration: none !important; }

[style*="color:#7D7D7D"], [style*="color: #7D7D7D"] {
  color: rgba(21,52,71,0.42) !important; font-size: 12px !important; font-weight: 300 !important;
}
.kbDate { font-size: 12px !important; font-weight: 300 !important; color: rgba(21,52,71,0.42) !important; }


/* ── 10. Help cards ──────────────────────────────────────────── */
.ig-help-section { padding: 48px 15px 64px; }

.ig-help-heading {
  font-size: 24px !important; font-weight: 500 !important; color: var(--ig-navy) !important;
  text-align: center !important; margin: 0 0 28px !important; letter-spacing: -0.015em !important;
}

.ig-help-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 860px; margin: 0 auto;
}

.ig-help-card {
  background: #ffffff; border: 1px solid rgba(21,52,71,0.11); border-radius: 12px;
  padding: 24px 20px; display: flex; flex-direction: column; gap: 12px;
  text-decoration: none !important;
  transition: border-color var(--ig-trans), box-shadow var(--ig-trans), transform var(--ig-trans);
}

.ig-help-card:hover {
  border-color: rgba(237,87,64,0.4); box-shadow: 0 6px 20px rgba(237,87,64,0.10);
  transform: translateY(-2px); text-decoration: none !important;
}

.ig-help-card--coral       { background: var(--ig-coral); border-color: var(--ig-coral); }
.ig-help-card--coral:hover { background: #d44a35; border-color: #d44a35; }

.ig-help-card-icon { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.ig-icon-navy      { background: rgba(21,52,71,0.08); }
.ig-icon-white     { background: rgba(252,252,252,0.22); }

.ig-help-card-icon img { width: 20px !important; height: 20px !important; opacity: 0.65 !important; margin: 0 !important; display: block !important; }
.ig-help-card--coral .ig-help-card-icon img { opacity: 0.9 !important; }

.ig-help-card-title { font-size: 15px !important; font-weight: 500 !important; color: var(--ig-navy) !important; margin: 0 !important; }
.ig-help-card--coral .ig-help-card-title,
.ig-help-card--coral .ig-help-card-desc { color: rgba(252,252,252,0.95) !important; }
.ig-help-card-desc { font-size: 13px !important; font-weight: 300 !important; color: rgba(21,52,71,0.50) !important; line-height: 1.55 !important; margin: 0 !important; }


/* ── 11. Knowledge Base hero ─────────────────────────────────── */
.ig-kb-hero {
  background-color: #f5f6f8;
  background-image: radial-gradient(ellipse at 100% 0%, rgba(237,87,64,0.06) 0%, transparent 60%);
  border-bottom: 1px solid rgba(21,52,71,0.08);
  padding: 56px 0 48px;
}

.ig-kb-hero .container {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}

.ig-kb-title {
  font-size: 38px !important; font-weight: 500 !important; color: var(--ig-navy) !important;
  margin: 0 !important; letter-spacing: -0.02em !important; line-height: 1.12 !important;
}

.ig-kb-subtitle {
  font-size: 15px !important; font-weight: 300 !important; color: rgba(21,52,71,0.55) !important;
  max-width: 520px !important; line-height: 1.6 !important; margin: 0 !important;
}

.ig-kb-search { width: 100%; max-width: 540px; margin: 8px 0 0; }

.ig-kb-body { background: #f5f6f8; padding: 40px 0 64px; }


/* ── 13. Buttons ─────────────────────────────────────────────── */
.btn {
  font-family: var(--ig-font) !important; font-weight: 500 !important; font-size: 13px !important;
  border-radius: var(--ig-radius-sm) !important; letter-spacing: 0.01em !important;
  transition: background var(--ig-trans), color var(--ig-trans), border-color var(--ig-trans);
}

.btn-info, .btn-info-home { background: var(--ig-coral) !important; color: var(--ig-white) !important; border-color: var(--ig-coral) !important; padding: 10px 22px !important; }
.btn-info:hover, .btn-info-home:hover { background: #c44130 !important; border-color: #c44130 !important; }

.btn-info-home2 { background: var(--ig-navy-08) !important; color: var(--ig-navy) !important; border: 1px solid var(--ig-border) !important; padding: 10px 22px !important; }
.btn-info-home2:hover { background: var(--ig-navy-12) !important; }

.btn-info-home0 { background: transparent !important; color: var(--ig-coral) !important; border: 1.5px solid var(--ig-coral) !important; }
.btn-info-home0:hover { background: var(--ig-coral-10) !important; color: #c44130 !important; }


/* ── 14. Breadcrumb ──────────────────────────────────────────── */
.breadcrumb { background: transparent !important; padding: 10px 0 !important; font-size: 13px !important; font-weight: 300 !important; margin-bottom: 1.25rem !important; }
.breadcrumb > li + li::before { content: "›  " !important; color: rgba(21,52,71,0.28) !important; }
.breadcrumb > li > a { color: var(--ig-coral) !important; font-weight: 400 !important; }
.breadcrumb > .active { color: rgba(21,52,71,0.55) !important; }


/* ── 15. Pagination ──────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  font-size: 13px !important; font-weight: 400 !important; color: rgba(21,52,71,0.6) !important;
  border: 1px solid var(--ig-border) !important; background: var(--ig-white) !important;
  border-radius: var(--ig-radius-sm) !important; margin: 0 2px !important; padding: 6px 13px !important;
  transition: all var(--ig-trans);
}
.pagination > li > a:hover { border-color: var(--ig-coral) !important; color: var(--ig-coral) !important; background: var(--ig-coral-10) !important; }
.pagination > .active > a,
.pagination > .active > span { background: var(--ig-coral) !important; border-color: var(--ig-coral) !important; color: var(--ig-white) !important; font-weight: 500 !important; }


/* ── 16. Footer ──────────────────────────────────────────────── */
footer, footer .footer-bottom { background: var(--ig-navy) !important; padding: 0 !important; }
footer::before { content: ''; display: block; height: 1px; background: rgba(252,252,252,0.07); }

.ig-footer-inner { max-width: 1200px; margin: 0 auto; padding: 40px 32px 32px; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ig-footer-left  { display: flex; flex-direction: column; gap: 12px; }
.ig-footer-logo  { width: auto !important; height: 48px !important; max-width: 180px !important; opacity: 0.92; }
.ig-footer-tagline { font-size: 12px !important; font-weight: 300 !important; color: rgba(252,252,252,0.38) !important; margin: 0 !important; }
.ig-footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; flex: 1; min-width: 220px; }
.ig-footer-nav   { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ig-footer-nav .footerbtn,
.ig-footer-nav button { font-size: 14px !important; font-weight: 400 !important; color: rgba(252,252,252,0.55) !important; background: transparent !important; border: none !important; padding: 6px 14px !important; cursor: pointer !important; white-space: nowrap !important; transition: color 0.15s ease !important; }
.ig-footer-nav .footerbtn:hover,
.ig-footer-nav button:hover { color: var(--ig-coral) !important; }
.ig-footer-copy { font-size: 12px !important; font-weight: 300 !important; color: rgba(252,252,252,0.25) !important; margin: 0 !important; text-align: right; }
.footer-bottom  { padding: 0 !important; }
.copyrightname  { display: none !important; }

@media screen and (max-width: 767px) {
  .ig-footer-inner { flex-direction: column; padding: 32px 20px 24px; gap: 24px; }
  .ig-footer-right { align-items: flex-start; width: 100%; }
  .ig-footer-nav   { justify-content: flex-start; }
  .ig-footer-copy  { text-align: left; }
}


/* ── 17. Article detail ──────────────────────────────────────── */
.article-content { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ig-black); }
.article-content h2, .article-content h3, .article-content h4 { color: var(--ig-navy); margin-top: 2rem; margin-bottom: 0.65rem; }
.article-content code { background: var(--ig-navy-05); color: var(--ig-navy); border: 1px solid var(--ig-border); border-radius: 4px; padding: 2px 6px; font-size: 13px; }
.article-content pre  { background: var(--ig-navy); color: rgba(252,252,252,0.88); border-radius: var(--ig-radius); padding: 1.25rem 1.5rem; overflow-x: auto; font-size: 13px; line-height: 1.7; margin: 1.25rem 0; }
.article-content blockquote { border-left: 3px solid var(--ig-coral); background: var(--ig-coral-10); border-radius: 0 var(--ig-radius-sm) var(--ig-radius-sm) 0; padding: 12px 18px; margin: 1.25rem 0; color: var(--ig-navy); font-size: 14px; }
.article-content table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 1.25rem 0; }
.article-content thead th { background: var(--ig-navy); color: rgba(252,252,252,0.85); font-weight: 500; padding: 10px 14px; border-bottom: 2px solid var(--ig-coral); text-align: left; font-size: 13px; }
.article-content tbody td { padding: 10px 14px; border-bottom: 1px solid var(--ig-border); color: var(--ig-black); font-weight: 300; }
.article-content tbody tr:hover { background: var(--ig-navy-05); }

.article-notice, .ig-notice { border-left: 3px solid var(--ig-navy); background: rgba(21,52,71,0.07); border-radius: 0 var(--ig-radius-sm) var(--ig-radius-sm) 0; padding: 12px 18px; font-size: 14px; font-weight: 400; color: var(--ig-navy); margin: 1.25rem 0; }
.article-notice.success, .ig-notice.success { border-left-color: var(--ig-green);  background: var(--ig-green-10);  color: #077a4d; }
.article-notice.warning, .ig-notice.warning { border-left-color: var(--ig-yellow); background: var(--ig-yellow-10); color: #8a6400; }
.article-notice.error,   .ig-notice.error   { border-left-color: var(--ig-red);    background: var(--ig-red-10);    color: var(--ig-red); }


/* ── 18. Search results ──────────────────────────────────────── */
.search-result-item { background: var(--ig-white); border: 1px solid var(--ig-border); border-radius: var(--ig-radius); padding: 1rem 1.25rem; margin-bottom: 10px; transition: border-color var(--ig-trans), box-shadow var(--ig-trans); }
.search-result-item:hover { border-color: var(--ig-border-hover); box-shadow: var(--ig-shadow); }
.search-result-item h3 { font-size: 15px; font-weight: 500; color: var(--ig-coral); margin-bottom: 6px; }
.search-result-item p  { font-size: 13px; font-weight: 300; color: rgba(21,52,71,0.55); margin: 0; }


/* ── 19. Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
  h1 { font-size: 24px !important; }
  h2 { font-size: 19px !important; }
  .ig-hero, .ig-kb-hero { padding: 48px 0 40px; }
  .ig-hero h1, .ig-hero-inner h1,
  .ig-kb-hero h1 { font-size: 28px !important; }
  .ig-popular-section { padding-top: 36px; }
  .ig-articles-col--right { border-left: none; border-top: 1px solid rgba(21,52,71,0.10); }
  .ig-help-cards { grid-template-columns: 1fr; }
  .ig-help-section { padding: 40px 15px 48px; }
  .ig-kb-body .list-group,
  .pageHeight .list-group { grid-template-columns: 1fr !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ig-help-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── 12. Knowledge Base page ─────────────────────────────────── */

/* Hide portal auto-generated page title — we use our own */
.wrapper-body .page-header,
.page-header h1 { display: none !important; }
.wrapper-body .page-heading { padding: 0 !important; }


/* Page background */
.wrapper-body { background: #f5f6f8 !important; }
.wrapper-body .container[role="main"] { padding-top: 0 !important; }
.wrapper-body .col-md-12 { padding-top: 16px !important; padding-bottom: 40px !important; }

/* ── Category grid ───────────────────────────────────────────── */
/* Targets both old markup (.list-group.unstyled) and new (.ig-kb-categories) */
.ig-kb-categories,
.list-group.unstyled {
  display:               grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap:                   12px !important;
  margin:                16px 0 40px !important;
  padding:               0 !important;
  background:            transparent !important;
  border:                none !important;
  box-shadow:            none !important;
}

/* Card */
.ig-kb-cat-item,
.list-group.unstyled > a.list-group-item {
  background:      #ffffff !important;
  border:          1px solid rgba(21,52,71,0.11) !important;
  border-radius:   10px !important;
  padding:         18px 20px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  color:           #153447 !important;
  font-size:       14px !important;
  font-weight:     500 !important;
  text-decoration: none !important;
  float:           none !important;
  margin:          0 !important;
  transition:      border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
  line-height:     1.4 !important;
  gap:             12px !important;
}

.ig-kb-cat-item:hover,
.list-group.unstyled > a.list-group-item:hover {
  border-color:    rgba(237,87,64,0.4) !important;
  box-shadow:      0 4px 16px rgba(237,87,64,0.09) !important;
  transform:       translateY(-1px) !important;
  color:           #ED5740 !important;
  text-decoration: none !important;
}

/* Left side layout (dot + text) */
.ig-kb-cat-left {
  display:     flex !important;
  align-items: center !important;
  gap:         12px !important;
  flex:        1 !important;
  min-width:   0 !important;
}

/* Colour dot — cycles through brand colours */
.ig-kb-cat-dot {
  width:        8px !important;
  height:       8px !important;
  border-radius: 50% !important;
  flex-shrink:  0 !important;
  background:   rgba(21,52,71,0.25) !important;
}

.ig-kb-cat-item:nth-child(6n+1) .ig-kb-cat-dot { background: #EBA800 !important; }
.ig-kb-cat-item:nth-child(6n+2) .ig-kb-cat-dot { background: #26BDBD !important; }
.ig-kb-cat-item:nth-child(6n+3) .ig-kb-cat-dot { background: #ED5740 !important; }
.ig-kb-cat-item:nth-child(6n+4) .ig-kb-cat-dot { background: #09AD6C !important; }
.ig-kb-cat-item:nth-child(6n+5) .ig-kb-cat-dot { background: #153447 !important; }
.ig-kb-cat-item:nth-child(6n+6) .ig-kb-cat-dot { background: rgba(21,52,71,0.25) !important; }

.ig-kb-cat-name {
  font-size:   14px !important;
  font-weight: 500 !important;
  color:       #153447 !important;
  line-height: 1.3 !important;
}

.ig-kb-cat-item:hover .ig-kb-cat-name { color: #ED5740 !important; }

.ig-kb-cat-count {
  font-size:   12px !important;
  font-weight: 300 !important;
  color:       rgba(21,52,71,0.42) !important;
  margin-top:  2px !important;
}

/* Arrow */
.ig-kb-cat-arrow,
.list-group.unstyled > a.list-group-item::after {
  font-size:   15px !important;
  font-weight: 300 !important;
  color:       rgba(21,52,71,0.22) !important;
  flex-shrink: 0 !important;
  transition:  color 0.15s, transform 0.15s !important;
  line-height: 1 !important;
}

/* Old markup: inject arrow via ::after */
.list-group.unstyled > a.list-group-item::after {
  content: '\2192' !important;
}

.ig-kb-cat-item:hover .ig-kb-cat-arrow,
.list-group.unstyled > a.list-group-item:hover::after {
  color:     #ED5740 !important;
  transform: translateX(3px) !important;
}

/* Bootstrap overrides */
.list-group.unstyled > a.list-group-item:first-child,
.list-group.unstyled > a.list-group-item:last-child {
  border-radius: 10px !important;
}

@media (max-width: 767px) {
  .ig-kb-categories,
  .list-group.unstyled { grid-template-columns: 1fr !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ig-kb-categories,
  .list-group.unstyled { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ── 13. KB page hero (rendered via page copy) ───────────────── */
.ig-kb-page-hero {
  text-align:  center;
  padding:     48px 16px 36px;
  background:  #f5f6f8;
}

.ig-kb-page-title {
  font-size:      38px !important;
  font-weight:    500 !important;
  color:          #153447 !important;
  margin:         0 0 12px !important;
  letter-spacing: -0.02em !important;
  line-height:    1.12 !important;
}

.ig-kb-page-sub {
  font-size:   15px !important;
  font-weight: 300 !important;
  color:       rgba(21,52,71,0.52) !important;
  max-width:   520px !important;
  margin:      0 auto 24px !important;
  line-height: 1.6 !important;
}

.ig-kb-search {
  max-width: 540px;
  margin:    0 auto;
}


/* ── 14. Support / Cases page ────────────────────────────────── */

/* Page background */
.wrapper-body { background: #f5f6f8 !important; }

/* Entity list container */
.entity-grid,
.entitylist,
.entitylist-container {
  background:    #ffffff !important;
  border:        1px solid rgba(21,52,71,0.11) !important;
  border-radius: var(--ig-radius) !important;
  overflow:      hidden !important;
  box-shadow:    var(--ig-shadow-sm) !important;
}

/* Table header */
.entity-grid th,
.entitylist th,
table.table > thead > tr > th {
  background:    #f5f6f8 !important;
  color:         rgba(21,52,71,0.55) !important;
  font-size:     12px !important;
  font-weight:   600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(21,52,71,0.10) !important;
  padding:       12px 16px !important;
  white-space:   nowrap !important;
}

/* Sortable column headers */
.entity-grid th a,
.entitylist th a,
table.table > thead > tr > th > a {
  color:           rgba(21,52,71,0.55) !important;
  text-decoration: none !important;
  font-weight:     600 !important;
}

.entity-grid th a:hover,
table.table > thead > tr > th > a:hover {
  color: var(--ig-coral) !important;
}

/* Table rows */
.entity-grid td,
.entitylist td,
table.table > tbody > tr > td {
  font-size:   13px !important;
  font-weight: 300 !important;
  color:       var(--ig-navy) !important;
  padding:     12px 16px !important;
  border-bottom: 1px solid rgba(21,52,71,0.06) !important;
  vertical-align: middle !important;
}

table.table > tbody > tr:hover > td {
  background: rgba(21,52,71,0.02) !important;
}

table.table > tbody > tr:last-child > td { border-bottom: none !important; }

/* Case number links */
table.table > tbody > tr > td > a {
  color:       var(--ig-coral) !important;
  font-weight: 500 !important;
}

table.table > tbody > tr > td > a:hover {
  color: #c44130 !important;
}

/* Status badges */
table.table .label,
.entity-grid .label {
  border-radius: 20px !important;
  font-size:     11px !important;
  font-weight:   500 !important;
  padding:       3px 10px !important;
  letter-spacing: 0.02em !important;
}

.label-success { background: var(--ig-green-10) !important; color: #077a4d !important; }
.label-warning { background: var(--ig-yellow-10) !important; color: #8a6400 !important; }
.label-danger  { background: var(--ig-red-10) !important; color: var(--ig-red) !important; }
.label-info    { background: var(--ig-navy-08) !important; color: var(--ig-navy) !important; }
.label-default { background: rgba(21,52,71,0.07) !important; color: rgba(21,52,71,0.55) !important; }

/* Action buttons in rows */
table.table .btn-default,
.entity-grid .btn-default {
  background:    var(--ig-white) !important;
  border:        1px solid var(--ig-border) !important;
  border-radius: var(--ig-radius-sm) !important;
  color:         var(--ig-navy) !important;
  padding:       4px 10px !important;
  font-size:     12px !important;
}

table.table .btn-default:hover,
.entity-grid .btn-default:hover {
  border-color: var(--ig-coral) !important;
  color:        var(--ig-coral) !important;
}

/* "Open a New Case" button */
.btn-primary {
  background:   var(--ig-coral) !important;
  border-color: var(--ig-coral) !important;
  color:        var(--ig-white) !important;
  font-weight:  500 !important;
  border-radius: var(--ig-radius-sm) !important;
}

.btn-primary:hover { background: #c44130 !important; border-color: #c44130 !important; }

/* Search bar above entity list */
.entitylist-search .form-control,
.view-toolbar .form-control {
  border:        1px solid var(--ig-border) !important;
  border-radius: var(--ig-radius-sm) !important;
  font-size:     13px !important;
  font-weight:   300 !important;
  color:         var(--ig-black) !important;
  height:        36px !important;
}

/* AI summary section */
.ai-summary-container,
[class*="ai-summary"] {
  background:    var(--ig-white) !important;
  border:        1px solid var(--ig-border) !important;
  border-radius: var(--ig-radius) !important;
  margin-bottom: 16px !important;
  padding:       16px !important;
  font-size:     13px !important;
  font-weight:   300 !important;
  color:         var(--ig-navy) !important;
}

/* "What can we help you with?" prompt */
.entitylist > .row:first-child,
.view-toolbar {
  padding:       16px !important;
  background:    var(--ig-white) !important;
  border-bottom: 1px solid var(--ig-border) !important;
}


/* ── Support page search bar & table padding fixes ───────────── */

/* Case deflection search bar — reset Bootstrap input-group table layout */
.case-deflection-search .input-group,
.entity-search .input-group,
[id*="case"] .input-group,
.col-md-12 > .input-group {
  display:       flex !important;
  align-items:   stretch !important;
  border-radius: var(--ig-radius-sm) !important;
  overflow:      hidden !important;
  border:        1px solid var(--ig-border) !important;
  background:    var(--ig-white) !important;
  box-shadow:    var(--ig-shadow-sm) !important;
}

.case-deflection-search .input-group .input-group-btn,
.entity-search .input-group .input-group-btn,
.col-md-12 > .input-group .input-group-btn {
  display:  flex !important;
  flex:     0 0 auto !important;
  width:    auto !important;
  float:    none !important;
  position: static !important;
}

.case-deflection-search .input-group .form-control,
.entity-search .input-group .form-control,
.col-md-12 > .input-group .form-control {
  flex:          1 1 auto !important;
  float:         none !important;
  height:        44px !important;
  border:        none !important;
  box-shadow:    none !important;
  font-size:     14px !important;
  font-weight:   300 !important;
  padding:       0 16px !important;
  border-radius: 0 !important;
}

.case-deflection-search .input-group .btn,
.entity-search .input-group .btn,
.col-md-12 > .input-group .btn {
  height:        44px !important;
  padding:       0 14px !important;
  background:    var(--ig-white) !important;
  border:        none !important;
  border-left:   1px solid var(--ig-border) !important;
  color:         rgba(21,52,71,0.45) !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
}

.case-deflection-search .input-group .btn:first-child,
.col-md-12 > .input-group .input-group-btn:first-child .btn {
  border-left:  none !important;
  border-right: 1px solid var(--ig-border) !important;
  color:        rgba(21,52,71,0.35) !important;
}

.case-deflection-search .input-group .btn:hover,
.entity-search .input-group .btn:hover,
.col-md-12 > .input-group .btn:hover {
  background: rgba(21,52,71,0.03) !important;
  color:      var(--ig-coral) !important;
}

/* Bottom padding on entity list / table */
.entitylist,
.entity-grid,
.entitylist-container,
.view-grid {
  padding-bottom: 8px !important;
}

/* Padding below the pagination */
.entitylist ~ .row,
.pagination-container,
[class*="pager"] {
  padding: 16px 0 8px !important;
}

/* Give the whole cases section breathing room */
.col-md-12.columnBlockLayout {
  padding-bottom: 32px !important;
}